<template>
  <div class="my-container">
    <!-- 已登录 -->
    <div v-if="user" class="bg">
      <img src="../../assets/banner.png" alt="" />

      <div class="info">
        <div class="info-box1">
          <div class="left">
            <img :src="userInfo.photo" alt="" />
            <span>{{ userInfo.name }}</span>
          </div>
          <div class="right">
            <van-button @click="$router.push('/user/profile')" round type="info"
              >编辑资料</van-button
            >
          </div>
        </div>
        <div class="info-box2">
          <van-grid :border="false">
            <van-grid-item>
              <template slot="text">
                <!-- <template #text>
                <template v-slot:text> -->
                <div>{{ userInfo.art_count }}</div>
                <div>头条</div>
              </template>
            </van-grid-item>

            <van-grid-item>
              <template slot="text">
                <!-- <template #text>
                <template v-slot:text> -->
                <div>{{ userInfo.follow_count }}</div>
                <div>关注</div>
              </template>
            </van-grid-item>

            <van-grid-item>
              <template slot="text">
                <!-- <template #text>
                <template v-slot:text> -->
                <div>{{ userInfo.fans_count }}</div>
                <div>粉丝</div>
              </template>
            </van-grid-item>
            <van-grid-item>
              <template slot="text">
                <!-- <template #text>
                <template v-slot:text> -->
                <div>{{ userInfo.like_count }}</div>
                <div>获赞</div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <!-- 未登录 -->
    <div v-else class="bg">
      <img src="../../assets/banner.png" alt="" />

      <div class="login">
        <img src="../../assets/mobile.png" alt="" />
        <span @click="$router.push('/login')">登陆 / 注册</span>
      </div>
    </div>

    <div class="nav">
      <van-grid :column-num="2">
        <van-grid-item icon="home-o" text="收藏" />
        <van-grid-item icon="search" text="历史" />
      </van-grid>
    </div>
    <div class="list">
      ==123=={{ aa() }}
      <van-cell title="消息通知" is-link />
      <van-cell title="小智同学" is-link />
    </div>
    <div class="logout" v-if="user">
      <van-button @click="logout" style="color:red" block>退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Dialog } from "vant";
import { userApi } from "@/api";
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    aa() {
      return 11111;
    },
    logout() {
      // this.$store.commit('rmToken')

      //
      Dialog.confirm({
        title: "是否退出登录"
      })
        .then(() => {
          // on confirm

          /* 
         清除vuex中的token和本地缓存
         跳转到  login 
         */
          this.$store.commit("rmToken");
          // this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
          console.log("cancel");
        });
    }
  },

  async created() {
    //  判断是不是有token   间接理解是：有没有登录
    if (this.user) {
      try {
        const { data: res } = await userApi();
        console.log(44444);
        this.userInfo = res.data;
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
<style scoped lang="less">
.my-container {
  .bg {
    position: relative;
    > img {
      width: 100%;
      display: block;
    }
    .login {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      display: flex;
      flex-direction: column;

      img {
        width: 100px;
        margin: 0 auto;
      }
      span {
        padding: 10px 0;
        font-size: 14px;
        color: #fff;
      }
    }

    .info {
      position: absolute;
      bottom: 0;
      width: 100%;
      .info-box1 {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px 60px;
        box-sizing: border-box;
        .left {
          display: flex;
          align-items: center;
          img {
            width: 150px;
            border: 5px solid red;
            border-radius: 50%;
          }
          span {
            font-size: 22px;
            padding-left: 20px;
            color: #fff;
          }
        }
      }
      .info-box2 {
        padding: 20px;
        /* /deep/   穿透    :v-deeep  */
        /deep/.van-grid-item__content {
          font-size: 25px;
          font-weight: bold;
          padding: 5px 0;
          color: #fff;
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
  }
}
</style>
